import * as React from 'react';
import {
    AppBar,
    Drawer,
    List,
    Stack,
    Typography,
    Toolbar,
    Box,
    Grid,
    Divider,
    ListItemButton,
    Button
} from '@mui/material';

interface AdminLayoutProps {
    title: string;
    modules: { key: string; label: string }[];
    onModuleSelect: (key: string) => void;
    isDrawerOpen: boolean;
    onDrawerToggle: () => void;
    content: React.ReactNode;
}

const AdminLayout: React.FC<AdminLayoutProps> = ({
                                                     title,
                                                     modules,
                                                     onModuleSelect,
                                                     isDrawerOpen,
                                                     onDrawerToggle,
                                                     content
                                                 }) => {
    const moduleButtons = modules.map((module, index) => (
        <React.Fragment key={index}>
            <ListItemButton onClick={() => onModuleSelect(module.key)}>
                {module.label}
            </ListItemButton>
            <Divider/>
        </React.Fragment>
    ));

    return (
        <Box sx={{display: 'flex'}}>
            <AppBar position="fixed"
                    sx={{backgroundColor: '#bae3d6', color: '#000000', zIndex: (theme) => theme.zIndex.drawer + 1}}>
                <Toolbar>
                    <Stack direction="row" alignItems="center" spacing={3}>
                        <Button color="inherit" onClick={onDrawerToggle}>
                            {isDrawerOpen ? '折叠' : '展开'}
                        </Button>
                        <img src="/assets/icon.png" alt="Logo" width="2%"/>
                        <Typography variant="h6" component="div" sx={{flexGrow: 1}}>
                            {title}
                        </Typography>
                    </Stack>
                </Toolbar>
            </AppBar>
            <Drawer
                variant="permanent"
                open={true}
                sx={{
                    width: isDrawerOpen ? 'auto' : '0%',
                    '& .MuiDrawer-paper': {
                        width: isDrawerOpen ? 'auto' : '0%',
                        boxSizing: 'border-box',
                    },
                }}
            >
                <Toolbar/>
                <Divider/>
                <List>
                    {moduleButtons}
                </List>
            </Drawer>
            <Grid item xs={12} sx={(theme) => ({
                flexGrow: 1,
                marginLeft: isDrawerOpen ? theme.spacing(isDrawerOpen ? 17 : 0) : 0,
                transition: 'margin-left 0.3s ease-out',
            })}>
                <Toolbar/>
                {content}
            </Grid>
        </Box>
    );
};

export default AdminLayout;
